<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="dept-form">
                <li class="select-list">
                    <ul>
                        <li>
                            分类1:<select id="category1" name="province"
                                        data-rel="chosen">
                            <option value="">全部分类</option>
                        </select>
                        </li>
                        <li>
                            分类2:
                            <select name="city" id="category2"
                                    data-rel="chosen">
                                <option value="">全部分类</option>
                            </select>
                        </li>
                        <li>
                            分类3:
                            <select name="area" id="category3"
                                    data-rel="chosen">
                                <option value="">全部分类</option>
                            </select>
                        </li>

                    </ul>
            </form>
        </div>

    </div>
</div>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var prefix = ctx + "system/category"

    $(function () {

        initCategrey();
    });


    function initCategrey() {
        $.get(
            prefix + "/list?parentId=100",
            function (data) {
                if (data) {
                    var result = "<option value=''>全部分类</option>";
                    $.each(data, function (n, value) {
                        result += "<option value='" + value.deptId + "'>" + value.deptName + "</option>";
                    });
                    $("#category1").html(result);
                }
            }, "json");


        $("#category1").change(function () {
            getCategoryValue();
            $.get(
                prefix + "/list?parentId=" + $("#category1").val(),
                function (data) {
                    $("#category2").html("<option value=''>全部分类</option>");
                    if (data) {
                        var result = "<option value=''>全部分类</option>";
                        $.each(data, function (n, value) {
                            result += "<option value='" + value.deptId + "'>" + value.deptName + "</option>";
                        });
                        $("#category2").html(result);
                    }
                }, "json");
        });
        $("#category2").change(function () {
            getCategoryValue();
            $.get(
                prefix + "/list?parentId=" + $("#category2").val(),
                function (data) {
                    $("#category3").html("<option value=''>全部分类</option>");
                    if (data) {
                        var result = "<option value=''>全部分类</option>";
                        $.each(data, function (n, value) {
                            result += "<option value='" + value.deptId + "'>" + value.deptName + "</option>";
                        });

                        $("#category3").html(result);
                    }
                }, "json");
        });

        $("#category3").change(function () {
            getCategoryValue();
        });
    }

    function getCategoryValue() {
        var c1 = $("#category1").val()
        var c2 = $("#category2").val()
        var c3 = $("#category3").val()

        console.log('**********: c1:' + c1 + ',' + 'c2:' + c2 + ',' + 'c3:' + c3);

    }
</script>
</body>
</html>